<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" content="">
		<title>core - selection.filter(selector)</title>
		<script type="text/javascript" src="../../d3.js"></script>
	</head>
	<body>
	<svg width=960 hight=500></svg>
		<script type="text/javascript">

			//生成text元素的数据
			var data = [ "text1","text2","text3","text4"];

			//新增元素
			d3.select('svg').selectAll('text')
				.data(data)	    //绑定数据
				.enter()		//返回新元素的占位符
				.append('text')	//新增新元素
				.attr({
					x: '20',
					y: function (d, i) {
						return 20 + 20 * i;
					},
					fill:"tomato"
				}).text(function (d, i) { return d; });
			
			//过滤奇数索引的text，并设置其文本填充色为blue
			d3.select('svg').selectAll('text').filter(function(d, i) {
				return i % 2 == 0;
			}).style("fill", "royalblue");
		</script>
	</body>
</html>